<!--
 * @Descripttion: 就业情况
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2021-08-04 18:01:07
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-08-04 18:01:55
-->

<template>
  <div class="container">
    <div class="statisticsTitleSty">就业情况</div>
    <div class="employBox">
      <!-- <div class = "clearfix"> -->
      <!-- <div class = "fl titleSty">已就业</div> -->
      <!-- <div class = "iconPerson fl">
                    <el-rate
                        v-model="value"
                        :icon-classes="iconClasses"
                        disabled-void-icon-class="icon iconfont iconren"
                        :colors="['#83F4AC', '#83F4AC', '#83F4AC']"
                        :max =10
                        allow-half = "true"
                        disabled
                    >
                    </el-rate>
                </div> -->
      <!-- <span class = "scaleNum fr">{{rate}}%</span> -->
      <!-- </div> -->
      <!-- <div class = "topLineSty"></div>
            <div class = "centerLineSty"></div>
            <div class = "bottomLineSty"></div> -->
      <div class="employsBox">
        <div id="employId" class="chartbg"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'employStatus',
  data() {
    return {
      recordsData: {
        total: '',
        scale: '',
        success: '',
      }, //违法记载
      isWidth: true,
      infoChart: '',
      numList: 10,
      value: '',
      iconClasses: [
        'icon iconfont iconren',
        'icon iconfont iconren',
        'icon iconfont iconren',
      ],
      rate: '',
    }
  },
  created() {},
  mounted() {
    const windowWidth = window.screen.width
    const windowHeight = window.screen.height
    if (windowWidth <= 1600) {
      this.isWidth = false
    }
    if (windowWidth <= 1366 && windowHeight <= 864) {
      this.isLow = true
    }
    this.getRealRecordsData(this.area)
  },
  props: {
    area: {
      type: String,
      default: '',
    },
  },
  watch: {
    area(val) {
      this.getRealRecordsData(val)
    },
  },
  methods: {
    getRealRecordsData(areaId) {
      return this.axios({
        method: 'post',
        url: '/api-r/employeejob/expand/onjobstats',
        data: {
          areaId,
        },
      })
        .then((response) => {
          if (response.data.hasError) {
            this.$message.error(response.data.errorMsg)
          } else {
            this.recordsData.data = response.data.result.result
            var rate = response.data.result.rate
            this.rate = parseInt(rate * 100)
            this.value = rate * 10
            this.drawRecords('employId', this.recordsData.data)
          }
        })
        .catch((error) => {
          this.$message.error(error.response.data)
        })
    },
    drawRecords(id, recordsData) {
      let topPos = null
      topPos = '40%'
      // let labelStr = `{a|{b}\n}{b|}\n{c|{d}%}  {a|{c}个}`;
      let labelStr = `{a|{b}\n}{b|}\n{c|{d}%}`
      let autoWidth = 100
      let size = 12
      if (!this.isWidth) {
        topPos = '38%'
        size = 10
      }

      this.infoChart = echarts.init(document.getElementById(id))
      this.infoChart.setOption({
        color: ['#01B3FF', '#83F4AC', '#F09054', '#ed777a', '#844cdb'],
        // legend: {
        //     data: [
        //         {
        //             name: "一般",
        //             textStyle: {
        //                 color: "#26BBFF",
        //             },
        //         },
        //         {
        //             name: "严重",
        //             textStyle: {
        //                 color: "#FBF592",
        //             },
        //         },
        //         {
        //             name: "重大",
        //             textStyle: {
        //                 color: "#F44153",
        //             },
        //         },
        //     ],
        //     top: 20,
        //     // right: 15,
        //     itemWidth: 10,
        //     itemHeight: 10,
        //     itemGap: 50, // 图例每项之间的间隔。
        // },
        tooltip: {
          trigger: 'item', //饼图悬浮提示
        },
        series: [
          {
            name: '就业情况',
            type: 'pie',
            radius: ['30%', '40%'],
            center: ['50%', topPos],
            label: {
              normal: {
                show: true,
                position: 'outside',
                rich: {
                  a: {
                    color: '#fff',
                    lineHeight: 17,
                    align: 'left',
                    fontSize: size,
                  },
                  b: {
                    backgroundColor: '#52FFAC',
                    width: autoWidth,
                    height: 2,
                  },
                  c: {
                    color: '#FED857',
                    lineHeight: 17,
                    align: 'left',
                    fontSize: size,
                  },
                },
                formatter: labelStr,
              },
            },
            labelLine: {
              show: true,
            },
            emphasis: {
              radius: ['30%', '45%'],
              label: {
                show: true,
                fontWeight: 'bold',
              },
            },
            data: recordsData,
          },
        ],
      })
      setTimeout(() => {
        window.addEventListener('resize', () => {
          this.infoChart.resize()
        })
      }, 200)
      this.infoChart.off('click')
      const vm = this
      this.infoChart.on('click', function (params) {
        var type
        if (params.name == '个体经营') {
          type = '01'
        } else if (params.name == '公益性岗位安置') {
          type = '02'
        } else if (params.name == '灵活就业') {
          type = '03'
        } else if (params.name == '自主就业') {
          type = '04'
        } else if (params.name == '其他自主就业') {
          type = '05'
        }
        vm.$router.push({
          path: '/home/eZhoubigScreen/employmentInfoTab',
          name: 'employmentInfoTab',
          query: {
            alertType: type,
            tab: 'employmentInfo',
          },
        })
        vm.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/eZhoubigScreen/employmentInfoTab',
          newUrl: vm.$router.currentRoute.fullPath,
        })
      })
    },
    employSizeChart() {
      this.infoChart.resize()
    },
  },
}
</script>

<style scoped lang="less">
.container {
  height: 100%;
  .statisticsTitleSty {
    height: 30px;
    // border:1px solid #ccc;
    line-height: 30px;
    padding-left: 12px;
    font-weight: 500;
    color: #5bfcf4;
    font-size: 16px;
    background: url('../../assets/titleBox.png') center center no-repeat;
    background-size: cover;
  }
  .iconPerson /deep/ .iconfont {
    font-size: 24px !important;
  }
  .employBox {
    height: calc(100% - 30px);
    padding: 24px 12px;
    position: relative;
    .titleSty {
      color: #88fcb2;
      font-size: 14px;
      margin-right: 4px;
    }
    .scaleNum {
      color: #88fcb2;
      font-size: 12px;
      margin-top: 8px;
    }
    .topLineSty {
      height: 8px;
      border: 1px solid #83f4ac;
      position: absolute;
      left: 30px;
      right: 30px;
      border-top: none;
      top: 60px;
    }
    .centerLineSty {
      height: 30px;
      border-right: 1px solid #83f4ac;
      position: absolute;
      left: 0;
      right: 0;
      top: 68px;
      width: 50%;
    }
    .bottomLineSty {
      height: 8px;
      border: 1px solid #83f4ac;
      border-bottom: none;
      position: absolute;
      left: 100px;
      right: 100px;
      top: 95px;
    }
  }
  .employsBox {
    height: calc(100% - 20px);
    // margin-top: 50px;有图例的时候显示
    margin-top: 30px;
  }
  .chartbg {
    height: 100%;
  }
}
</style>
